<template>
  <div style="height: 500px">
    <VueFlow
      v-model="elements"
      :default-zoom="1.5"
      :min-zoom="0.2"
      :max-zoom="4"
      class="basicflow"
      :default-viewport="{ x: 50, y: 50, zoom: 1.5 }"
    >
      <template #node-custom="nodeProps">
        <div class="custom-node">
          <div>{{ nodeProps.data.label }}</div>
          <button v-if="nodeProps.data.buttonText" class="node-button">
            {{ nodeProps.data.buttonText }}
          </button>
        </div>
      </template>
    </VueFlow>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { VueFlow } from '@vue-flow/core'
// 需要单独引入样式
import '@vue-flow/core/dist/style.css'
import '@vue-flow/core/dist/theme-default.css'

// 定义节点数据
const elements = ref([
  {
    id: '1',
    type: 'custom',
    position: { x: 0, y: 100 },
    data: { 
      label: '数据集',
      buttonText: '开始使用'
    }
  },
  {
    id: '2',
    type: 'custom',
    position: { x: 200, y: 100 },
    data: { 
      label: '交互式建模\n(DSW)',
      buttonText: '开始使用'
    }
  },
  {
    id: '3',
    type: 'custom',
    position: { x: 400, y: 100 },
    data: { 
      label: '分布式训练\n(DLC)',
      buttonText: '开始使用'
    }
  },
  {
    id: '4',
    type: 'custom',
    position: { x: 600, y: 100 },
    data: { 
      label: '模型在线服务\n(EAS)',
      buttonText: '开始使用'
    }
  },
  // 连接线
  {
    id: 'e1-2',
    source: '1',
    target: '2',
    type: 'smoothstep',
    animated: true,
  },
  {
    id: 'e2-3',
    source: '2',
    target: '3',
    type: 'smoothstep',
    animated: true,
  },
  {
    id: 'e3-4',
    source: '3',
    target: '4',
    type: 'smoothstep',
    animated: true,
  },
])
</script>

<style scoped>
.basicflow {
  background-color: #f8f8f8;
}

.custom-node {
  padding: 15px;
  border-radius: 8px;
  background: white;
  border: 1px solid #ddd;
  text-align: center;
  width: 180px;
  font-size: 14px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.custom-node:hover {
  background: #f0f0f0;
  cursor: pointer;
}

.node-button {
  background: #1890ff;
  color: white;
  border: none;
  padding: 5px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.node-button:hover {
  background: #40a9ff;
}

:deep(.vue-flow__edge-path) {
  stroke: #b1b1b7;
  stroke-width: 2;
}

:deep(.vue-flow__edge.animated path) {
  stroke-dasharray: 5;
  animation: dashdraw 1s linear infinite;
}

@keyframes dashdraw {
  from {
    stroke-dashoffset: 10;
  }
}
</style>